<template>
  <div id="app">
    <my-header></my-header>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <my-tool :isDetail="isDetail"></my-tool>
    <!--music-->
    <div class="aplayer" data-id="5124224493" data-server="netease"
      data-type="playlist" data-fixed="true"  data-volume="0.45"
      data-order="random" data-list-folded="true"
    ></div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { music } from 'utils/utils'

export default {
  name: 'App',
  data() {
    return {
      isDetail: false
    }
  },
  created() {
    if (!this.$route.meta.requireAuth && this.$route.name !== 'bangumi') {
      this.getData()
    }
  },
  methods: {
    ...mapActions({
      setTypes: 'blog/SETCATEGORY',
      setTags: 'blog/SETTAG',
      setRecommend: 'blog/SETRECOMMEND',
      setArchives: 'blog/SETARCHIVES',
      setCarousel: 'blog/SETCAROUSEL',
      setAdmin: 'user/SETADMIN'
    }),
    getData() {
      this.setTypes()
      this.setTags()
      this.setRecommend()
      this.setArchives()
      this.setCarousel()
      this.setAdmin()
    }
  },
  watch: {
    $route(to, from) {
      if(to.name === 'blog') {
        this.isDetail = true;
      } else {
        this.isDetail = false;
      }
    }
  },
}
</script>

<style lang="scss">
@import "~assets/css/main.css";
#app {
  min-height:100%;
  position: relative;
}
header {
  a.site-page {
    color: #000;
    &:hover {
      color: #28cfcf;
    }
  }
}
main {
  max-width: 1180px;
  margin: 80px auto 0;
  // 距离footer
  padding-bottom: 170px;
  .header-info a{
    color: #666;
  }
}
footer {
  canvas {
    display: block;
    width: 100%;
    height: 160px;
    animation: fadeIn 3s ease;
  }
}
@media screen and (max-width: 992px) { 
  main {
    margin: 58px auto 0;
  }
}
/*loading动画*/
.icon-load {
  animation: loading 1s linear infinite;
}
@keyframes loading {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
/*music*/
.aplayer {
  .aplayer-body {
    left: -66px !important;
    border-radius: 0 7px 7px 0;
    overflow: hidden;
    transition: all 0.5s ease !important;
    &:hover {
      left: 0 !important;
    }
  }
  &:not([class*="aplayer-narrow"]) {
    .aplayer-body {
      left: 0 !important;
    }
  }
}
</style>
